<template>
	<view class="container">
		<!-- 顶部固定区域 -->
		<view class="fixed-content">
			<!-- 顶部用户信息区域 -->
			<view class="user-info-box">
				<view class="user-avatar-section">
					<image class="avatar" src="/static/default-avatar.png" mode="aspectFill" @click="handleAuthClick"></image>
					<text class="text-primary">欢迎使用智慧药箱</text>
				</view>
				<view class="auth-box">
					<text class="text-secondary">亲情授权</text>
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</view>
			</view>
			
			<!-- 功能按钮区域 -->
			<view class="function-box">
				<view class="function-item" v-for="(item, index) in functionList" :key="index" @click="handleFunctionClick(item)">
					<view class="function-icon">
						<uni-icons :type="item.icon" size="24" color="#2ac2d1"></uni-icons>
					</view>
					<text class="text-primary">{{item.text}}</text>
				</view>
			</view>
		</view>

		<!-- 可滚动的内容区域 -->
		<scroll-view 
			class="scrollable-content" 
			scroll-y 
			refresher-enabled
			:refresher-triggered="isRefreshing"
			@refresherrefresh="onRefresh"
			@scrolltolower="handleScrollToLower"
			:lower-threshold="100"
		>
			<!-- 药品列表区域 -->
			<view class="medicine-list">
				<uni-swipe-action>
					<uni-swipe-action-item v-for="(item, index) in medicineList" 
						:key="index"
						:right-options="swipeOptions"
						@click="handleSwipeClick($event, item.id)">
						<view class="medicine-item">
							<view class="medicine-info">
								<image class="medicine-image" src="/static/medicine.png" mode="aspectFit"></image>
								<view class="medicine-name">{{item.name}}</view>
							</view>
							<view class="medicine-actions">
								<button class="action-btn" size="mini" plain @click="handleAddToGroup(item.id)">添加到药品组合</button>
								<button class="action-btn" size="mini" plain @click="handleDetail(index)">详情</button>
							</view>
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
				
				<!-- 加载更多提示 -->
				<view class="loading-more" v-if="hasMore">
					<view class="loading-text" v-if="isLoading">正在加载更多...</view>
					<view class="loading-text" v-else>上滑加载更多</view>
				</view>
				<view class="no-more" v-else>
					<view class="no-more-text">没有更多数据了</view>
				</view>
			</view>
		</scroll-view>
		
		<!-- 右下角添加按钮 -->
		<view class="float-icon" @click="navigateToEdit">
			<uni-icons type="plusempty" size="24" color="#2ac2d1"></uni-icons>
			<view class="add-count" v-if="addedMedicineCount > 0">{{ addedMedicineCount }}</view>
		</view>
	</view>
</template>

<script>
	import { useMedicineStore } from '@/store/medicine'
	import navigator from '@/utils/navigator'
	import { showLoading,hideLoading } from '../../utils/loading'
	export default {
		// 页面配置
		navigationBarTitleText: '首页',
		backgroundColor: '#f5f5f5',
		
		setup() {
			const medicineStore = useMedicineStore()
			return {
				medicineStore
			}
		},
		data() {
			return {
			// 其他数据...
				addedMedicineCount: 0, // 已添加的药品数量
				addedMedicineIds: new Set(), // 用于存储已添加的药品ID，防止重复添加
				functionList: [{
					icon: 'list',
					text: '药品列表',
					path: ''
				}, {
					icon: 'star',
					text: '药品组合',
					path: '/pages/group/group'
				}, {
					icon: 'notification',
					text: '用药提醒',
					path: '/pages/reminder/reminder'
				}],
				medicineList: [{
					id: 1,
					name: '布洛芬胶囊'
				}, {
					id: 2,
					name: '感冒灵颗粒'
				}, {
					id: 3,
					name: '板蓝根冲剂'
				},{
					id: 1,
					name: '布洛芬胶囊'
				}, {
					id: 2,
					name: '感冒灵颗粒'
				}, {
					id: 3,
					name: '板蓝根冲剂'
				}],
				page: 1,
				pageSize: 10,
				hasMore: true,
				isLoading: false,
				isRefreshing: false,
				swipeOptions: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}]
			}
		},
		onLoad() {
			this.medicineStore.getMedicineList()
			// this.medicineList = this.medicineStore.medicines
		},
		onReachBottom() {
			console.log('第二步触发触底事件');
			this.medicineStore.getMedicineList()
			this.medicineList = this.medicineStore.medicineList
		},
		methods: {
			// 处理功能按钮点击
			handleFunctionClick(item) {
				if (item.path) {
					navigator.navigate(item.path);
				}
			},

			// 处理授权点击
			handleAuthClick() {
				navigator.navigate('/pages/auth/auth');
			},

			// 处理滑动删除
			handleSwipeClick(e, index) {
				if (e.content.text === '删除') {
					this.handleDelete(index);
				}
			},

			// 处理删除
			handleDelete(index) {
				uni.showModal({
					title: '提示',
					content: '确定要删除这个药品吗？',
					success: (res) => {
						if (res.confirm) {
							this.medicineStore.deleteMedicine(index);
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							});
						}
					}
				});
			},

			// 处理查看详情
			handleDetail(index) {
				const medicine = this.medicineList[index];
				navigator.navigate('/pages/detail/detail', {
					id: medicine.id,
					name: medicine.name
				});
			},

			// 处理下拉刷新
			async onRefresh() {
				console.log('触发下拉刷新');
				this.isRefreshing = true;
				this.page = 1;
				this.hasMore = true;
				try {
					// 清空列表
					this.medicineList = [];
					// 重新加载数据
					this.medicineStore.getMedicineList();
					uni.showToast({
						title: '刷新成功',
						icon: 'success'
					});
				} catch (error) {
					uni.showToast({
						title: '刷新失败',
						icon: 'error'
					});
				} finally {
					this.isRefreshing = false;
				}
			},

			// 处理滚动触底
			async handleScrollToLower() {
				console.log('触发触底加载');
				if (this.hasMore && !this.isLoading) {
					this.page++;
					// await this.loadMedicineList();
				}
			},

			// 处理添加到药品组合
			handleAddToGroup(index) {
				const medicine = this.medicineList[index];
				if (!this.addedMedicineIds.has(medicine.id)) {
					this.addedMedicineIds.add(medicine.id); // 将药品ID添加到已添加集合中
					this.addedMedicineCount++; // 增加计数
					uni.showToast({
						title: '已添加到组合',
						icon: 'success'
					});
				} else {
					uni.showToast({
						title: '该药品已添加',
						icon: 'none'
					});
				}
			},

			// 跳转到编辑页面
			navigateToEdit() {
				// 获取已添加的药品 ID 列表
				const selectedMedicines = Array.from(this.addedMedicineIds).map(id => {
					const medicine = this.medicineList.find(item => item.id === id);
					return {
						id: medicine.id,
						name: medicine.name
					};
				});

				// 跳转到编辑页面，并传递已添加的药品信息
				uni.navigateTo({
					url: '/pages/group/edit?selectedMedicines=' + encodeURIComponent(JSON.stringify(selectedMedicines)),
				});

				// 重置计数和已添加的药品 ID
				this.addedMedicineCount = 0;
				this.addedMedicineIds.clear();
			}
		}
	}
</script>

<style lang="scss">
.container {
	height: 100vh;
	background-color: #f5f5f5;
	position: relative;
	display: flex;
	flex-direction: column;
}

.fixed-content {
	background-color: #ffffff;
	padding: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.user-info-box {
	padding: 30rpx 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	.user-avatar-section {
		display: flex;
		align-items: center;
		
		.avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			background-color: #f0f0f0;
			margin-right: 20rpx;
		}
	}
	
	.auth-box {
		display: flex;
		align-items: center;
		padding: 10rpx 20rpx;
		background-color: #f8f8f8;
		border-radius: 30rpx;
	}
}

.function-box {
	padding: 30rpx 20rpx;
	display: flex;
	justify-content: space-around;
	
	.function-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.function-icon {
			width: 80rpx;
			height: 80rpx;
			background-color: rgba(42, 194, 209, 0.1);
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 10rpx;
		}
	}
}

.scrollable-content {
	flex: 1;
	height: 0;
	padding-bottom: 20rpx;
}

.medicine-list {
	padding: 20rpx 20rpx 0;
	
	.medicine-item {
		background-color: #ffffff;
		padding: 20rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 12rpx;
		
		.medicine-info {
			display: flex;
			align-items: center;
			
			.medicine-image {
				width: 80rpx;
				height: 80rpx;
				margin-right: 20rpx;
			}
			
			.medicine-name {
				font-size: 28rpx;
				color: #333;
			}
		}
		
		.medicine-actions {
			display: flex;
			gap: 10rpx;
			
			.action-btn {
				font-size: 24rpx;
				color: #2ac2d1;
				border-color: #2ac2d1;
				
				&::after {
					border-color: #2ac2d1;
				}
			}
		}
	}
	
	.loading-more, .no-more {
		text-align: center;
		padding: 10rpx 0;
		
		.loading-text, .no-more-text {
			font-size: 24rpx;
			color: #999;
		}
	}
	
	.no-more {
		.no-more-text {
			color: #ccc;
		}
	}
}

.float-icon {
	position: fixed;
	right: 30rpx;
	bottom: 40rpx;
	width: 80rpx;
	height: 80rpx;
	background-color: #ffffff;
	border-radius: 50%;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 100;
}

.float-icon {
	position: fixed;
	right: 30rpx;
	bottom: 40rpx;
	width: 80rpx;
	height: 80rpx;
	background-color: #ffffff;
	border-radius: 50%;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 100;
	
	.add-count {
		position: absolute;
		top: 0;
		right: 0;
		background-color: #93e0e7;
		color: #ffffff;
		font-size: 20rpx;
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
</style>